import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class MyPet extends StatefulWidget {
  @override
  MyPetPage createState() => MyPetPage();
}

class MyPetPage extends State<MyPet> {
  int _current_card = 0;
  List card = [
    {
      "name": "白泽",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm",
    },
    {
      "name": "黑狗1",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm",
    },
    {
      "name": "黑狗2",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm",
    },
    {
      "name": "黑狗3",
      "img":
          "https://img1.baidu.com/it/u=2804737717,3397424581&fm=253&fmt=auto&app=138&f=JPEG",
      "desc": "emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm",
    },
  ];
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));
    return Scaffold(
      body: SafeArea(
          child: Stack(
        children: [
          CustomScrollView(
            shrinkWrap: true,
            slivers: <Widget>[
              SliverPadding(
                padding: const EdgeInsets.all(0.0),
                sliver: SliverList(
                  delegate: SliverChildListDelegate(
                    <Widget>[
                      SizedBox(
                        child: Swiper(
                          itemBuilder: (BuildContext context, int index) {
                            return getCard(context, index);
                          },
                          itemCount: card.length,
                          autoplay: false,
                          loop: false,
                          pagination: const SwiperPagination(),
                          viewportFraction: 0.8,
                          scale: 0.9,
                          onIndexChanged: (i) {
                            setState(() {
                              _current_card = i;
                            });
                          },
                        ),
                        height: 500,
                        width: double.infinity,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(10),
                        child: SizedBox(
                            width: double.infinity,
                            child: Column(
                              children: [
                                const Text(
                                    "您的神兽宝宝将于2022年5月6日返回天庭，(如已开通自动续费，续费完成后，此时间会更新)"),
                                Padding(
                                  padding: const EdgeInsets.all(10),
                                  child: Column(
                                    children: [
                                      Text(
                                        card[_current_card]["name"],
                                        style: const TextStyle(
                                            fontWeight: FontWeight.bold,
                                            color: Colors.grey,
                                            fontSize: 25),
                                      ),
                                      Text(
                                        card[_current_card]["desc"],
                                        style: const TextStyle(
                                            color: Colors.grey, fontSize: 20),
                                      )
                                    ],
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                  ),
                                ),
                                Row(
                                  children: [
                                    InkWell(
                                      onTap: () {},
                                      child: Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                const BorderRadius.all(
                                                    Radius.circular(10)),
                                            color: Colors.grey.shade300),
                                        child: Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 20, vertical: 10),
                                          child: Row(
                                            children: const [
                                              Icon(Icons.ios_share),
                                              Text("分享"),
                                            ],
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                          ),
                                        ),
                                      ),
                                    ),
                                    InkWell(
                                      onTap: () {
                                        Navigator.of(context)
                                            .pushNamed("purchaserecord");
                                      },
                                      child: Container(
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                const BorderRadius.all(
                                                    Radius.circular(10)),
                                            color: Colors.grey.shade300),
                                        child: Padding(
                                          padding: const EdgeInsets.symmetric(
                                              horizontal: 20, vertical: 10),
                                          child: Row(
                                            children: const [
                                              Icon(Icons.list_alt),
                                              Text("购买记录"),
                                            ],
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceAround,
                                )
                              ],
                              crossAxisAlignment: CrossAxisAlignment.start,
                            )),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          Align(
            alignment: Alignment.topRight,
            child: Padding(
              padding: const EdgeInsets.only(top: 20, right: 20),
              child: Wrap(
                children: [
                  InkWell(
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                    child: Container(
                      width: 30,
                      height: 30,
                      child: Stack(
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(5),
                            child: Container(
                              color: Colors.white,
                            ),
                          ),
                          Image.asset(
                            "assets/close.png",
                          ),
                        ],
                      ),
                      alignment: Alignment.topRight,
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      )),
    );
  }

  Widget getCard(BuildContext context, int index) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: Image.network(
                    card[index]["img"],
                    fit: BoxFit.cover,
                  ).image,
                  fit: BoxFit.cover),
              borderRadius: const BorderRadius.all(Radius.circular(5))),
        ),
        Padding(
          padding: const EdgeInsets.all(10),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(10)),
              color: Colors.white.withOpacity(0.8),
            ),
            child: Padding(
              padding: const EdgeInsets.all(5),
              child: Wrap(
                children: [
                  Column(
                    children: [
                      const Text(
                        "我的神兽宝宝",
                        style: TextStyle(
                            color: Color(0xff747474),
                            fontSize: 15,
                            fontWeight: FontWeight.bold),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 1),
                        child: Text(
                          card[index]["name"],
                          style: const TextStyle(
                              fontSize: 25, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}
